/**
 * 首页
 */
<template>
	<view class="pages ">
		<!-- 输入框 -->
		<view>
			<view class="search" @click="toSearch">
				<u-icon name="search" size="28"></u-icon>
				<text>搜索</text>
			</view>
		</view>
		<!-- 轮播图 -->
		<Swiper></Swiper>
		<view class="u-m-t-10">
			<uni-section  title="选择词汇书" type="line" ></uni-section>
			<view>
				<up-row gutter="12" justify="space-between">
					<u-col :span="6">
						<view class="col-box">
							<!-- 使用uniapp 内置组件 navigator 可以跳转页面 -->
							<navigator url="/pages_word_follow-up/pages/index/index">单词跟读</navigator>
						</view>
					</u-col>
					<u-col :span="6">
						<view class="col-box">单词练习</view>
					</u-col>
				</up-row>
				<up-row gutter="12" justify="space-between" :custom-style="{marginTop:'50rpx'}">
					<u-col :span="6">
						<view class="col-box">单词消消乐</view>
					</u-col>
					<u-col :span="5">
						<view class="col-box">单词答题闯关练习</view>
					</u-col>
				</up-row>
			</view>
		</view>
	</view>
</template>

<script setup>
	//引入首页轮播图组件
	import Swiper from '@/pages/index/components/swiper/index.vue'
	
	/**
	 * 页面跳转函数
	 */
	function toPages(url) {
		//这个url是指定页面路径
		//navigateTo 方法用于跳转到另一个页面上
		uni.navigateTo({
			url:url
		})
	}
	
	function toSearch(){
		uni.navigateTo({
			url:"/pages_search/pages/search"
		})
	}
</script>

<style scoped lang="scss">
	.search {
		width: 100%;
		padding: 8rpx 15rpx;
		border: 1rpx solid #000;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text {
			font-size: 28rpx;
			font-weight: 600;
		}
	}
	.col-box {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
		border: 1rpx solid #d1d1d1;
		text-align: center;
		line-height: 300rpx;
		color: #000;
		font-size: 28rpx;
		font-weight: 600;
	}
</style>
